//公共样式
/* 去除所有标签的边距和间距、设置边框为内边框模式 */
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    .box-sizing(border-box);
    &:before,
    &:after {
      .box-sizing(border-box);
    }
  }
  
  /* 定义页面框架的样式 */
  html {
    font-size: 62.5%;
    // height: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
  }
  body {
    font-family: 'microsoft YaHei';
    color: @global-color;
    font-size: @global-font-size;
    font-size: 14px\9;
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background-color: #f5f5f5
    }
    &::-webkit-scrollbar-track {
      background-color: #f5f5f5
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color:#555
    }
  }
  #app {
    display: table;
    width: 100%;
    height: 100%;
  }
  xmp, pre, plaintext {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  
  /* 定义超链接样式，点击、悬停、 获焦*/
  a {
    text-decoration: none;
    outline: none;
    cursor: pointer;
    &:active {
    
    }
    &:hover {
    
    }
    &:focus {
      
    }
  }
  
  /* 图片样式定义，设置图片显示的最大宽度，为父元素的百分比，注意父元素必须是块线元素（display: inline-block/block） */
  img {
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: none;
  }
  
  /* 去除（有序）列表的默认样式和边/间距 */
  ul, ol {
    list-style: outside none none;
    margin: 0;
    padding: 0;
  }
  
  /* 去除input、button等的默认样式 */
  button,
  input,
  select,
  textarea {
    vertical-align: baseline;
    outline: none;
    border: 0;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  
  /* 清除浮动，用于直接子元素设置了浮动的情况 */
  .clear {
    &:before,
    &:after {
      content: "";
      display: table;
    }
    &:after {
      clear: both;
    }
  }
  
  /* 左右填充为100% */
  .fill {
    width: 100%;
  }
  
  /* 定义错误数据和列表为空时公用样式 */
  .shift {
    margin: 10px 0;
    padding: 10px;
    background: @bg-gray;
    .border-radius(5px);
    color: @c-white;
    text-align: center;
  }
  
  /* 显示&隐藏 */
  .block { display: block !important; }
  .none { display: none !important; }
  .inline { display: inline !important; }
  .inline-block { display: inline-block !important; }
  .show { display: block !important; }
  .hide { display: none !important; }
  
  /* 元素浮动 */
  .pull-left {
    float: left;
  }
  .pull-right {
    float: right;
  }
  
  [type="file"] {
    .opacity(0);
  }
  
  /* 定义文字颜色 */
  .c-gray         { color: @c-gray !important; }
  .c-blue         { color: #36a3ff !important; }
  .c-red          { color: #f4393e !important; }
  .c-green        { color: #76d567 !important; }
  .c-black        { color: #000000 !important; }
  .c-white        {color: #fff !important;}
  .c-orange       {color: #FFD6D6 !important;}
  
  /* 背景色 */
  .b-white {background: #fff !important;}
  
  /* 定义间距边距 */
  .p-normal { padding: 10px; }
  .pt-normal { padding-top: 10px; }
  .pr-normal { padding-right: 10px; }
  .pb-normal { padding-bottom: 10px; }
  .pl-normal { padding-left: 10px; }
  .pv-normal { padding-top: 10px; padding-bottom: 10px;}
  .ph-normal { padding-left: 10px; padding-right: 10px;}
  .m-normal { margin: 10px; }
  .mt-normal { margin-top: 10px; }
  .mr-normal { margin-right: 10px; }
  .mb-normal { margin-bottom: 10px; }
  .ml-normal { margin-left: 10px; }
  .m-none    { margin: 0 !important; }
  .ml-none    { margin-left: 0 !important; }
  .mr-none    { margin-right: 0 !important; }
  .mt-none    { margin-top: 0 !important; }
  .mb-none    { margin-bottom: 0 !important; }
  .m-normal  { margin: @s-sm; }
  .m-xs      { margin: @s-xs; }
  .m-lg      { margin: @s-lg; }
  .m-xl      { margin: @s-xl; }
  .m-xxl     { margin: @s-xxl; }
  .mt-normal { margin-top: @s-sm; }
  .mt-xs     { margin-top: @s-xs; }
  .mt-lg     { margin-top: @s-lg; }
  .mt-xl     { margin-top: @s-xl; }
  .mt-xxl    { margin-top: @s-xxl; }
  .mr-normal { margin-right: @s-sm; }
  .mr-xs     { margin-right: @s-xs; }
  .mr-lg     { margin-right: @s-lg; }
  .mr-xl     { margin-right: @s-xl; }
  .mr-xxl    { margin-right: @s-xxl; }
  .mb-normal { margin-bottom: @s-sm; }
  .mb-xs     { margin-bottom: @s-xs; }
  .mb-lg     { margin-bottom: @s-lg; }
  .mb-xl     { margin-bottom: @s-xl; }
  .mb-xxl    { margin-bottom: @s-xxl; }
  .ml-normal { margin-left: @s-sm; }
  .ml-xs     { margin-left: @s-xs; }
  .ml-lg     { margin-left: @s-lg; }
  .ml-xl     { margin-left: @s-xl; }
  .ml-xxl    { margin-left: @s-xxl; }
  
  .p-none    { padding: 0 !important; }
  .pl-none    { padding-left: 0 !important; }
  .pr-none    { padding-right: 0 !important; }
  .pt-none    { padding-top: 0 !important; }
  .pb-none    { padding-bottom: 0 !important; }
  .p-normal  { padding: @s-sm !important;; }
  .p-xs      { padding: @s-xs !important;; }
  .p-lg      { padding: @s-lg !important;; }
  .p-xl      { padding: @s-xl !important;; }
  .p-xxl     { padding: @s-xxl !important;; }
  .pt-normal { padding-top: @s-sm; }
  .pt-xs     { padding-top: @s-xs; }
  .pt-lg     { padding-top: @s-lg; }
  .pt-xl     { padding-top: @s-xl; }
  .pt-xxl    { padding-top: @s-xxl; }
  .pr-normal { padding-right: @s-sm; }
  .pr-xs     { padding-right: @s-xs; }
  .pr-lg     { padding-right: @s-lg; }
  .pr-xl     { padding-right: @s-xl; }
  .pr-xxl    { padding-right: @s-xxl; }
  .pb-normal { padding-bottom: @s-sm; }
  .pb-xs     { padding-bottom: @s-xs !important; }
  .pb-lg     { padding-bottom: @s-lg; }
  .pb-xl     { padding-bottom: @s-xl; }
  .pb-xxl    { padding-bottom: @s-xxl; }
  .pl-normal { padding-left: @s-sm; }
  .pl-xs     { padding-left: @s-xs; }
  .pl-lg     { padding-left: @s-lg; }
  .pl-xl     { padding-left: @s-xl; }
  .pl-xxl    { padding-left: @s-xxl; }
  
  .top-none  { top: 0 !important; }
  
  .relative {
    position: relative !important;
  }
  .absolute {
    position: absolute !important;
  }
  
  /* 定义通知消息 、错误消息、提醒消息、警告消息*/
  .alert {
  
  }
  .error {
    color: @c-red;
    margin-left: 10px;
    &:before {
      content: "\e627";
      margin-right: 5px;
      font-size: @f-size-sm;
      font-size: 16px\9;
      position: relative;
      top: 1px;
      .iconfont();
    }
  }
  .loading-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .7);
    .box {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      height: 20px;
      margin-top: -15px;
      margin-left: -75px;
      text-align: center;
      > span,
      &:before,
      &:after {
        width: 20px;
        height: 20px;
        margin: 0 5px;
        background-color: #296dec;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
        animation: bouncedelay 1.4s infinite ease-in-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        content: '';
      }
      &:before {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
      }
      > span {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
      }
    }
  }
  
   //文字溢出变...
  .ellipsis {
    white-space:nowrap; 
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis; 
    overflow:hidden;
  }
  
  @-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
  }
   
  @keyframes bouncedelay {
    0%, 80%, 100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    } 40% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    }
  }